<!--详细信息-->
<template>
  <div class="theDetailedInformation">
    <header class="header-theDetailedInformation"><van-icon name="arrow-left" @click="returnsBtn"/>详细信息</header>
    <main>
      <!--基本信息-->
      <div class="titleLogo">
        <img src="@/assets/static/image/thePartyBranch321/jibenxinxi@2x.png" alt="基本信息">
        <span>基本信息</span>
      </div>
      <div class="theBasicInformation">
        <div class="cardList"><span>落实事项:</span><span>{{ theBasicInformation.matterDescription }}</span></div>
        <div class="cardList"><span>落实责任人:</span><span>{{ theBasicInformation.userName }}</span></div>
        <div class="cardList"><span>“三会一课”检索关键词:</span><span>{{ theBasicInformation.sanKeKeywords }}</span></div>
        <div class="cardList"><span>工作特性:</span><span>{{ theBasicInformation.workType | jobCharacteristics }}</span></div>
        <div class="cardList"><span>计划完成时间:</span><span>{{ theBasicInformation.finishTime | captureTheDate }}</span></div>
        <div class="cardList">
          <span>状态:</span>
          <span>
            <span v-if="type === 'theAffiliatedPartyUnfinishedList' || type === 'cityCompanyUnfinishedList'" class="state-red">待处理</span>
            <span v-else :class="[theBasicInformation.workStatus === '未下发' || theBasicInformation.workStatus === '未分派' ? 'state-red' : 'state-green',]">{{ theBasicInformation.workStatus }}</span>
          </span>
        </div>
      </div>
      <!--工作子项-->
      <div class="titleLogo">
        <img src="@/assets/static/image/thePartyBranch321/gongzuozixiang@2x.png" alt="工作子项">
        <span>工作子项</span>
      </div>
      <div class="workItems">
        <van-collapse v-model="activeNames">
          <!--工作子项-->
          <van-collapse-item :value="activeNames.includes(item.id) ? '收起' : '展开'" :name="item.id" title-class="workItems-titleCard" value-class="workItems-valueCard" v-for="(item,index) in workItems" :key="item.id">
            <template #title>
              <div class="theSerialNumber">{{ index + 1 }}</div>
              <div class="title">{{ item.subWorkDescription }}</div>
            </template>
            <div class="item">
              <div class="title">落实举措：</div>
              <div class="content">{{ item.implementedInitiatives }}</div>
            </div>
            <div class="item">
              <div class="title">细化说明 ：</div>
              <div class="content">{{ item.detailedDescription }}</div>
            </div>
            <div class="item">
              <div class="title">时间计划：</div>
              <div class="content">{{ item.planTime }}</div>
            </div>
            <div class="item">
              <div class="title">完成标志：</div>
              <div class="content">{{ item.completionMark }}</div>
            </div>
            <div class="item">
              <div class="title">备注：</div>
              <div class="content">{{ item.remarks }}</div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <div class="temporarilyNoData" v-if="workItems.length === 0">暂无数据...</div>
      </div>
    </main>
  </div>
</template>
<script >
import API from "@/api/api-chat-list"
import dayjs from "dayjs";
import * as _ from "lodash"
export  default {
  data() {
    return {
      activeNames:[],//展开和收起
      theBasicInformation:'',//基本信息
      workItems:'',//工作子项
      type:'',//组件类型
    };
  },
  async created(){
    this.type = this.$route.params.type
    await this.request(this.$route.params.type,this.$route.params.item)
    this.activeNames = this.workItems.map(item => item.id);
  },
  methods:{
    /**
     *返回上一页
     */
    returnsBtn(){
      this.$router.go(-1)
    },
    /**
     * @param type 组织类型
     * @param item 工作子项id
     * @returns {string} 工作子项表单数据
     */
    async request(type,item){
      this.theBasicInformation = _.cloneDeep(item)
      const data = {
        workItems:'',
      }
      switch ( type ) {
        case "SaveTheCompanyIssued"://省公司下发工作子项
          data.workItems = await API.queryProvinceSubWorkList({ workOrderId:item.workOrderId});
          break;
        case 'theAffiliatedPartyTaskList'://直属党委任务列表
        case 'theAffiliatedPartyUnfinishedList'://直属党委未完成任务列表
        case 'theCityListCompany'://市公司任务列表
        case 'cityCompanyUnfinishedList'://市公司未完成任务列表
          data.workItems = await API.queryCitySubWorkList({ workOrderId:item.workOrderId,parentWorkId:item.parentWorkId});
          break;
        case 'listHasBeenCompleted':   //支部任务任务列表
        case 'unfinishedList':   //支部任务未完成任务列表
          data.workItems =  await API.queryBranchSubWorkList({ workOrderId:item.workOrderId,parentWorkId:item.parentWorkId})
          break;
      }
      this.workItems = data.workItems.data.taskReminderSubWorks
    }
  },
}
</script>

<style scoped lang="less">
@import "@/assets/css/thePartyBranch321/thePartyBranch321.less";
</style>